<template name="index">
  <h1>Autoform Semantic UI Example</h1>
  <div class="ui segment">
    <p>This is a set of simple examples used to demo the package and also run some tests.</p>
  </div>
  <h2>Dogs</h2>
  <table class="ui table">
    <thead>
      <th>Name</th>
      <th>Breed</th>
      <th>Fave thing</th>
      <th>Actions</th>
    </thead>
    <tbody>
    {{#each dogs}}
      <tr>
        <td>{{name}}</td>
        <td>{{breed}}</td>
        <td>{{faveThing}}</td>
        <td>
          <div class="ui icon button delete-dog">
            <i class="delete icon"></i>
          </div>
          <div class="ui icon button edit-dog">
            <i class="edit icon"></i>
          </div>
        </td>
      </tr>
    {{/each}}
    </tbody>
  </table>
  <div class="ui button add-dog">
    <i class="plus icon"></i>
    Add a dog
  </div>
  {{> modal title="Add a dog" type="insert"}}
  {{> modal title="Update a dog" type="update"}}
</template>

<template name="modal">
  <div class="ui modal {{name}} {{type}}">
    <i class="close icon"></i>
    <div class="header">
      {{title}} {{type}}
    </div>
    <div class="content">
    {{#if ptype}}
      {{> quickForm collection="Dogs" type="insert" doc=updateDoc}}
    {{else}}
      {{> quickForm collection="Dogs" type="update" doc=updateDoc}}
    {{/if}}
    </div>
  </div>
</template>
